<template>
  <div class="mine-edit">
    <!-- 标题区 -->
    <van-nav-bar
      title="标题"
      left-arrow
      @click-left="$router.push('/layout/mine')"
    />
    <!-- 头像区 -->
    <div class="photo">
      <van-image round width="3rem" height="3rem" :src="userInfo.photo" />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- cell资料区 -->
    <van-cell
      title="名称"
      is-link
      :value="userInfo.name"
      @click="showNameDialog"
    />
    <van-cell
      title="性别"
      @click="changeGender"
      is-link
      :value="userInfo.gender ? '男' : '女'"
    />
    <van-cell
      title="生日"
      @click="changeBirth"
      is-link
      :value="userInfo.birthday"
    />
    <!-- 修改名称区 -->
    <van-dialog
      v-model="dialogShow"
      @confirm="changeName"
      title="修改名称"
      show-cancel-button
    >
      <van-field ref="nameInp" v-model="editName" />
    </van-dialog>
    <!-- 修改性别区 -->
    <van-popup v-model="popShow" position="bottom" :style="{ height: '21%' }">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="onClickLeft"
      />
      <van-cell @click="changeSex(1)" title="男" is-link />
      <van-cell @click="changeSex(0)" title="女" is-link />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="birthShow" position="bottom" :style="{ height: '35%' }">
      <van-datetime-picker
        @confirm="changeBirthday"
        v-model="currentDate"
        type="date"
        @cancel="clickLeft"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 裁剪区 -->
    <div class="cutter" v-show="cropShow">
      <vueCropper
        ref="cropper"
        autoCrop
        autoCropWidth="150"
        autoCropHeight="150"
        fixed
        :img="cropImg"
      ></vueCropper>
      <van-button type="primary" @click="doCrop">裁剪</van-button>
      <van-button type="primary" @click="cropShow = false">取消</van-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { editProfileAPI, editPhotoAPI } from '@/api'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data () {
    return {
      // 默认弹出框关闭
      dialogShow: false,
      // 名称栏
      editName: '',
      // 性别栏
      popShow: false,
      // 生日选择时间控制栏
      minDate: new Date('1999-01-06'),
      maxDate: new Date('2022-01-06'),
      currentDate: new Date(),
      // 生日栏
      birthShow: false,
      // 裁剪区
      cropShow: false,
      cropImg: ''
    }
  },
  methods: {
    // 修改名称

    showNameDialog () {
      // 打开弹出框
      this.dialogShow = true
      // 把名字赋值到文本框上
      this.editName = this.userInfo.name
      // 获得焦点，因为vant里的所有组件都是懒加载，没有渲染就会隐藏，所以我们要在数据渲染后再次访问
      this.$nextTick(() => {
        this.$refs.nameInp.focus()
      })
    },
    async changeName () {
      // 里面的内容由自己输入决定
      await editProfileAPI({
        name: this.editName
      })
      // 把数据保存到vuex里
      this.$store.commit('setUserInfo', {
        ...this.$store.state.userInfo,
        name: this.editName
      })
    },
    // 修改性别

    changeGender () {
      // 将pop弹出层打开
      this.popShow = true
    },
    onClickLeft () {
      // 点击取消隐藏pop弹出层
      this.popShow = false
    },
    async changeSex (gender) {
      // 如果选择的性别和它显示的一致就不发送请求直接隐藏pop弹出层
      if (gender === this.userInfo.gender) {
        return (this.popShow = false)
      }
      // 选择性别
      await editProfileAPI({
        gender
      })
      // 把数据保存到vuex里
      this.$store.commit('setUserInfo', {
        ...this.$store.state.userInfo,
        gender
      })
      // 选择完后将pop弹出层隐藏
      this.popShow = false
    },
    // 修改生日

    changeBirth () {
      // 打开pop弹出层
      this.birthShow = true
      // 打开时时间栏的数据应该与被改外面的数据保持一致
      this.currentDate = new Date(this.userInfo.birthday)
    },
    clickLeft () {
      // 点击取消关闭pop弹出层
      this.birthShow = false
    },
    // 发送请求
    async changeBirthday () {
      // 因为获取的数据格式是Date类型的，但是我们要的是字符串类型的，所以需要转换格式
      const birthday = moment(this.currentDate).format('YYYY-MM-DD')
      // 获得生日数据
      await editProfileAPI({
        birthday
      })
      // 保存到vuex里
      this.$store.commit('setUserInfo', {
        ...this.$store.state.userInfo,
        birthday
      })
      // 关闭pop弹出层
      this.birthShow = false
    },

    // 上传照片
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // base64地址
      // console.log(file.content)
      // console.log(file, file)
      // 点击上传完成后跳转到裁剪区
      this.cropShow = true
      this.cropImg = file.content
    },
    doCrop () {
      this.$refs.cropper.getCropBlob(async (data) => {
        // console.log(data)
        // 利用Ajax上传文件必须得用formData
        const fm = new FormData()
        fm.append('photo', data)
        const res = await editPhotoAPI(fm)
        // 关闭裁剪区
        this.cropShow = false
        // 将数据保存在vuex中，然后得到渲染
        this.$store.commit('setUserInfo', {
          ...this.$store.state.userInfo,
          photo: res.data.data.photo
        })
        this.$toast.success('修改成功')
      })
    }
  },
  created () {
    this.$store.dispatch('reqUserInfo')
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  }
}
</script>

<style lang="less" scoped>
.mine-edit {
  .photo {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-dialog__content {
    border: 1px solid #ddd;
  }
  .van-uploader {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;

    ::v-deep.van-uploader__wrapper {
      width: 100%;
      height: 100%;

      .van-uploader__upload {
        width: 100%;
        height: 100%;
      }
    }
  }
  .cutter {
    // vh与vw表示把视口宽高分成100份，它取多少份。
    height: 100vh;
    width: 100vw;
    background-color: #09f;
    position: fixed;
    top: 0;
    left: 0;

    .van-button {
      position: fixed;
      left: 0;
      bottom: 0;
      &:nth-of-type(2) {
        left: auto;
        right: 0;
      }
    }
  }
}
</style>
